<template>
  <el-dialog :model-value="dialogData.isShow" :title="dialogData.id?'编辑':'新增'"
             @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="90px">
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="部件名称" prop="name">
             <el-input v-model="form.name" maxlength="20" placeholder="请输入部件名称"/>
           </el-form-item>
         </el-col>
        <el-col :span="12">
          <el-form-item label="设备id" prop="hazardId">
            <el-input type="number" v-model="form.hazardId" placeholder="请输入设备id"/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="部件编码" prop="unitCode">
             <el-input v-model="form.unitCode" maxlength="50" placeholder="请输入部件编码"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="生产单位" prop="manufacturers">
             <el-input v-model="form.manufacturers" maxlength="100" placeholder="请输入生产单位"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="型号" prop="model">
             <el-input v-model="form.model" maxlength="100" placeholder="请输入型号"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="规格" prop="specifications">
             <el-input v-model="form.specifications" maxlength="100" placeholder="请输入规格"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
         <el-col :span="12">
           <el-form-item label="使用年限" prop="durableYears">
             <el-input v-model="form.durableYears" maxlength="100" placeholder="请输入使用年限"/>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label-width="120" label="投入使用时间">
             <el-date-picker v-model="form.useTime" type="datetime" placeholder="请选择投入使用时间"/>
           </el-form-item>
         </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="20">
          <el-form-item label-width="120" label="是否正常使用">
            <el-radio-group v-model="form.status">
              <el-radio :label="0" border>未使用</el-radio>
              <el-radio :label="1" border>使用中</el-radio>
              <el-radio :label="2" border>维修中</el-radio>
              <el-radio :label="3" border>报废</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {addHazardUnit, getHazardUnit, updateHazardUnit} from "@/api/hazard/hazardUnit";
import {getHazardList} from "@/api/hazard/hazard"

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

// 表单
let form: any = ref({
    id: null,
    hazardId: null,
    name: null,
    unitCode: null,
    manufacturers: null,
    model: null,
    specifications: null,
    durableYears: null,
    useTime: null,
    status:true,
});

// 效验规则
const rules = reactive<FormRules>({
  hazardId: [
    {required: true, message: '请输入设备id', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '请输入部件名称', trigger: 'blur'},
  ],
  unitCode: [
    {required: true, message: '请输入部件编码', trigger: 'blur'},
  ],
  status: [
    {required: true, message: '请选择是否正常使用，0：未使用，1：使用中', trigger: 'blur'},
  ],
})

// 获取详情
const getDetails = (id: string) => {
  getHazardUnit(id).then(res => {
    form.value = Object.assign({}, form.value, res);
  })
}

const hazardData = reactive({
    data: [],
})

// 获取设备列表
const getTableList = () => {
    getHazardList({}).then(res => {
        hazardData.data = res;
    })
}



// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openDialog = async (id: string) => {
  dialogData.isShow = true;
  dialogData.title = '新增设备安全隐患部件列';
  if (id) {
    dialogData.id = id;
    dialogData.title = '编辑设备安全隐患部件列';
    getDetails(id);
    getTableList();
  }
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  form.value = {};
}
// 提交

const submit = async () => {
   if (!formRef.value) return;
   await formRef.value.validate((valid: any) => {
   if (valid) {
       let data = form.value;
     if (data.id) {
       updateHazardUnit({...data}).then(() => {
         ElMessage.success('操作成功');
         closeDialog();
         emits('refresh');
       })
     } else {
       addHazardUnit({...data}).then(() => {
       ElMessage.success('操作成功');
       closeDialog();
       emits('refresh');
       })
     }
   }
  })
}

defineExpose({
  openDialog,
});
</script>

<style scoped>

</style>
